<template>
	<view>
		<header-top :messageInfo="{typeFlag:false,message:'',liner:true}"></header-top>
		<view class="mainpadding_top">
			<view class="logintext">欢迎登录询博订货管理端</view>
			<view class="mainpadding_top">
				<view class="needbot-bor">
					<input type="text" placeholder="请输入手机号" v-model="mobile">
				</view>
				<view class="needbot-bor flexbetween">
					<input type="text" placeholder="请输入手机验证码" v-model="yzm_code">
					<view class="flexcenter sendcode" @click="sendyzm" v-show="codetext == 1">发送验证码</view>
					<view class="flexcenter sendcode" v-show="codetext == 2">{{second}}s后重新获取</view>
					<view class="flexcenter sendcode" @click="sendyzm" v-show="codetext == 3">重新发送</view>
				</view>
				<view class="flexright nostrongtext margin_top" @click="jumpurl('/pages/login/accountlogin')">密码登录</view>
			</view>
		</view>
		<view class="mainpadding_top">
			<view class="surebtns flexcenter margin_top" @click="login">同意协议并登录</view>
			<view class="margin_top flexleft" @click="checkbtn">
				<view class="leftradio">
					<!-- 选中 --> 
					<view v-show="checkbox" class="selecticon">
						<image src="@/static/image/system/dui.png" mode=""></image>
					</view>
					<!-- 未选中 -->
					<view v-show="!checkbox" class="noselecticon"></view>
				</view>
				<view class="smalltext">登录即代表已阅读并同意</view>
				<view class="smalltext maincolor_text">《使用协议》</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext:1,
				checkbox:false,
				yzm_code:"",
				mobile:"",
				second:59,
			}
		},
		methods: {
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value); 
				return a;
			},
			//发送验证码
			sendyzm(){
				let _this = this;
				if(_this.mobile == ''){
					httpRequest.toast("请输入手机号码!")
					return;
				}
				if(!_this.isMobile(_this.mobile)){
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				_this.codetext = 2;
				_this.second = 59;
				let timer = setInterval(function(){
					if(_this.second > 1){
						_this.second--;
					}else{
						clearInterval(timer);
						_this.codetext = 3;
					}
				},1000)
				httpRequest.request('appapi/manage/sms/send','POST',{
					mobile:this.mobile,
					event:'mobilelogin',
				},false,true,false).then(res => {
					console.log(res);
					if(res.code == 1){
						httpRequest.toast('发送成功')
					}
				})
			},
			// 勾选政策
			checkbtn(){
				this.checkbox = this.checkbox==true?false:true
			},
			jumpurl(url){
				// uni.navigateTo({
				// 	url:url,
				// })
				uni.navigateBack(1)
			},
			login(){
				if(this.mobile==""){
					httpRequest.toast("请输入手机号")
					return false
				}
				if(this.yzm_code==""){
					httpRequest.toast("请输入验证码")
					return false
				}
				if(!this.checkbox){
					httpRequest.toast("请认真阅读并勾选使用协议")
					return false
				}
				httpRequest.request("appapi/manage/login/mobile_login", 'POST', {
					mobile: this.mobile,
					captcha: this.yzm_code
				}).then(res => {
					if(res.code == 1){
						httpRequest.toast('登录成功');
						uni.setStorageSync('token',res.data.token);
						uni.reLaunch({
							url:'/pages/homepage/homepage'
						})
					}else{
						httpRequest.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logintext{
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 47rpx;
	}
	.needbot-bor{
		margin-top: 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}
	.sendcode{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #00B855;
	}
	.nostrongtext{
		font-weight: 500;
	}
	.smalltext{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.maincolor_text{
		color: #00B855;
	}
	.leftradio{
		margin-right: 10rpx;
	}
	// 选中的单选按钮
	.selecticon{
			  width: 30rpx;
			  height: 30rpx;
			  border-radius: 50%;
			  border: 1rpx solid #00B855;
			  background-color: #00B855;
			  image {
			  	width: 20rpx;
			  	height: 12rpx;
			  	margin-bottom: 15rpx;
			  	margin-left: 5rpx;
			  }
			}
	// 未选中的单选按钮
	.noselecticon{
			  width: 30rpx;
			  height: 30rpx;
			  border-radius: 50%;
			  border: 1rpx solid #999999;
	}
</style>
